<template>
    <div class="main">
        <label for="file" class="excelBtn">Excel导入</label>
        <input type="file" id="file" style="display:none" @change="fileChange" ref="excelinputers">

        <!-- excel显示-显示为表格（类似） 
           contenteditable 把我们的其他标签变成可以输入的模式
      -->
        <el-button type="primary" @click="exportExcel">Excel导出</el-button>
        <table border="1" id="result" contenteditable="true">
            <tr >
                <template v-for="(sub, subindex) in dataSource[0]" >
                    <!-- eslint-disable-next-line vue/require-v-for-key -->
                    <th>{{(subindex == 0 ? "" : String.fromCharCode(65 + subindex - 1))}}</th>
                </template>
            </tr>
            <!-- <tr v-for="(item,index) in dataSource" :key="index" v-if="index==0">
                        <template v-for="(sub,subindex) in item">
                            <th>{{(subindex == 0 ?"":String.fromCharCode(65+subindex-1))}}</th>
                        </template>
                    </tr> -->
            <tr v-for="(item, index) in dataSource" :key="index">
                <template v-for="sub in item">
                    <!-- eslint-disable-next-line vue/require-v-for-key -->
                    <td> {{ sub }} </td>
                </template>
            </tr>
        </table>
    </div>
</template>

<script>
import * as XLSX from 'xlsx/xlsx.mjs'
import * as $ from 'jquery'
export default {
    name: '',
    data() {
        return {
            dataSource: []
        }
    },
    props: ['files'],
    mounted() {

    },
    methods: {
        //获取本地文件
        fileChange() {
            let files = document.getElementById('file').files
            //   console.log(files)
            this.fileReader(files[0])
        },
        fileReader(file) {
            //   console.log(file)
            let that = this;
            if (file.length == 0) return;
            if (!/\.xlsx?$/g.test(file.name)) {
                this.$message.warning('上传格式不正确，请上传xls或xlsx格式')
                return;
            }
            //调用本地读取excel的方法
            that.readWorkbookFromLocalFile(file, (workbook) => {
                console.log(workbook)
                //处理获取到的数据
                that.readWorkbook(workbook)
            })
        },
        //封装读取本地的excel文件
        readWorkbookFromLocalFile(file, callback) {
            let reader = new FileReader();
            reader.onload = function(e) {
                let data = e.target.result;
                let workbook = XLSX.read(data, { type: 'binary' });
                if (callback) callback(workbook)
            }
            reader.readAsBinaryString(file);
        },
        //封装处理数据的方法
        readWorkbook(workbook) {
            let sheetNames = workbook.SheetNames; //工作表名称集合
            let worksheet = workbook.Sheets[sheetNames[0]];//这里我们只读取第一张sheet
            let csv = XLSX.utils.sheet_to_csv(worksheet);
            //console.log(csv)
            //把拿到的数据转化为表格并输出
            let rows = csv.split('\n');
            //console.log(rows)  
            let arr = [];
            rows.forEach((row, idx) => {
                let columns = row.split(',');
                columns.unshift(idx + 1);
                arr.push(columns)
            })
            this.dataSource = arr;
            console.log(arr)
        },
        //导出函数
        exportExcel() {
            let csv = this.tableTocsv($('#result')[0])
            console.log(csv)
            let sheet = this.csvTosheet(csv)
            //   console.log(sheet)
            let blob = this.sheetToblob(sheet);
            //   console.log(blob)
            this.openDownloadDialog(blob, '导出.xlsx')
        },
        //同学们写的时候基本上是在修改这个地方
        tableTocsv(table) {
            let csv = [];
            $(table).find('tr').each(function() {
                let temp = [];
                $(this).find('td').each(function() {
                    temp.push($(this).html())
                })
                temp.shift()
                csv.push(temp.join(','))
            })
            csv.shift()
            //   console.log(csv)
            return csv.join('\n');
        },
        //将csv格式转成 sheet对象
        csvTosheet(csv) {
            let sheet = {};
            csv = csv.split('\n');
            csv.forEach(function(row, i) {
                row = row.split(',');
                if (i == 0) sheet['!ref'] = 'A1:' + String.fromCharCode(65 + row.length - 1) + (csv.length - 1);
                row.forEach(function(col, j) {
                    sheet[String.fromCharCode(65 + j) + (i + 1)] = { v: col };
                })
            })
            return sheet;
        },
        //将一个sheet对象转成最终的excel文件的blob对象 然后下载
        sheetToblob(sheet, sheetName) {
            sheetName = sheetName || 'sheet1'
            let workbook = {
                SheetNames: [sheetName],
                Sheets: {}
            }
            workbook.Sheets[sheetName] = sheet;
            //生成excel的配置项
            let wopts = {
                bookType: 'xlsx',
                bookSST: false,
                type: 'binary'
            }
            let wbout = XLSX.write(workbook, wopts);
            let blob = new Blob([sab(wbout)], { type: 'application/octet-stream' });
            //把字符串转化成 arrayBuffer(类型化数组)
            function sab(s) {
                let buf = new ArrayBuffer(s.length);
                let view = new Uint8Array(buf);
                for (let i = 0; i != s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
                return buf
            }
            return blob
        },
        //通用的打开下载对话框方法
        openDownloadDialog(url, saveName) {
            if (typeof url == 'object' && url instanceof Blob) {
                url = URL.createObjectURL(url); //创建blob地址
            }
            let aLink = document.createElement('a');
            aLink.href = url;
            aLink.download = saveName || '';
            let event;
            if (window.MouseEvent) event = new MouseEvent('click');
            else {
                event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            }
            //触发事件
            aLink.dispatchEvent(event)
        }
    },
}
</script>

<style>
.excelBtn {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #409eff;
    border: 1px solid #DCDFE6;
    color: #FFF;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    line-height: 14px;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px
}
</style>